<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title> 瑞能电力数据看板</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <link rel="stylesheet" href="./css/index.css">
        <script src="./js/flexible.js"></script>
        <script src="./js/jquery.min.js"></script>
        <script src="./js/echarts.js"></script>

    </head>

    <body>
        <div id="app">
            <div class="left">
                <div style="margin-top:0.67rem">{{nowTime[1]}}</div>
                <div class="week">
                    <div>{{nowWeek}}</div>
                    <div>{{nowTime[0]}}</div>
                </div>
                <img src="./img/cloud.png" alt="">
            </div>
            
            <div class="title">
                瑞能电力数据看板
            </div>
            <div class="right">
                <div >数据由平台进行统计</div>
                <button class="enter">全屏</button>
            </div>
            <div class="mainbox">
                <!-- 项目分类比 -->
                <div class="circular">
                    <div>
                        <div class="projectRate">项目分类比</div>
                        <el-date-picker 
                            style="width: 230px;height: 32px;"
                            v-model="value1"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            @change="typePer">
                        </el-date-picker>
                    </div>
                    <div class="circular_echsrts" id="circular"></div>
                </div>
                <!-- 项目增长量 -->
                <div class="wave">
                    <div class="maintain_title">
                        <div class="maintain_title_left">项目增长量</div>
                    </div>
                    <div class="wave_echarts" id="wave"></div>
                </div>
                <!-- 项目完成数据 -->
                <div class="maintain">
                    <div class="maintain_title">
                        <div class="maintain_title_left">项目完成数据</div>
                        <el-date-picker 
                            style="width: 230px;height: 32px;"
                            v-model="value1"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            @change="finish">
                        </el-date-picker>    
                    </div>
                    <div class="com-screen-content">
                        <div class="topRec_List maintained">
                            <dl>
                                <dd>百万</dd>
                                <dd>十万</dd>
                                <dd>万</dd>
                                <dd>千</dd>
                                <dd>百</dd>
                                <dd>十</dd>
                                <dd>个</dd>
                            </dl>
                            <div class="maintain_list" style="align-items: right;">
                                <span class="counter" style="writing-mode: horizontal-tb;" data-counter-time="4000" data-counter-delay="50">{{finishNumber}} </span>
                                <!-- <span class="counter" style="writing-mode: horizontal-tb;" data-counter-time="5000" data-counter-delay="50">1,498,547</span> -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 类型分布  -->
                <div class="operation">
                    <div class="maintain_title">
                        <div class="maintain_title_left">类型分布</div>
                        <el-date-picker 
                            style="width: 230px;height: 32px;"
                            v-model="value1"
                            type="daterange"
                            range-separator="-"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="typeDis">
                        </el-date-picker>
                    </div>
                    <div class="maintain_echarts" id="operation"></div>
                </div>
            </div>
    
            <!--  <script type="text/javascript"
                src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script> -->
            <!--<script src="./js/echarts.js"></script>-->
            <script src="./js/wave.js"></script>
            <script src="./js/circular.js"></script>
            <script src="./js/maintain.js"></script>
            <script src="./js/operation.js"></script>
            <script src="./js/detail.js"></script>

            <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
            <script src="./js/jquery.waypoints.min.js"></script>
            <script type="text/javascript" src="./js/jquery.countup.min.js"></script>
            <script>
            var baseUrl = ' https://rndl.westts.cn/api/databoard'
    
            
            
            new Vue({
                el: '#app',
                data() {
                    return {
                        value1: '' ,
                        nowTime: '',
                        nowWeek: '',
                        start_date: '',
                        finishNumber: 0,
                    }
                },
                
                created(){
                    // console.log(window,'dghaauwdhgaio')
                    let t = Date.now()
                    this.nowTime = this.timestampToTime(t).split(' ')
                    // 取周
                    let w = this.timeweek(t).split(' ')
                    // this.fun()
                    var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];  
                    var myDate = new Date(Date.parse(w));  
                    this.nowWeek = weekDay[myDate.getDay()]

                    // console.log(this.nowWeek);   
                    this.finishData()
                },
                methods:{
                    timestampToTime(timestamp) {
                        timestamp = timestamp ? timestamp : null;
                        let date = new Date(timestamp);
                        let Y = date.getFullYear() + '年';
                        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
                        let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日'+' ';
                        let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                        let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) ;
                        // let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                        return Y + M + D + h + m;
                    },
                    timeweek(timestamp) {
                        timestamp = timestamp ? timestamp : null;
                        let date = new Date(timestamp);
                        let Y = date.getFullYear() + '/';
                        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                        let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) +' ';
                        let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                        let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) ;
                        // let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                        return Y + M + D;
                    },
                    finish(s){
                        
                        this.start_date = s[0]
                        this.end_date = s[1]
                        this.finishData()
                    },
                    typeDis(){
                        getoperation()
                    },
                    typePer(){
                        getcircular()
                    },
                    PrefixInteger(num, length) {
                        return (Array(length).join('0') + num).slice(-length);
                    },
                    thousands(num){
                        var str = num.toString();
                        var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                        return str.replace(reg,"$1,");
                    },
                    finishData(){
                        let that = this
                        setTimeout(function () {
                            $.ajax({
                            url: baseUrl + "/finishNum",
                            type: "POST",
                            dataType: "json",
                            data: {
                                start_date : that.start_date,
                                end_date : that.end_date
                            },
                            success: function (data) {
                            that.PrefixInteger(data.data,7)
                            that.finishNumber = that.PrefixInteger(data.data,7)
                            that.finishNumber = that.thousands(that.finishNumber)
                            $('.counter').countUp();
                            },
                            // 超时时间
                            timeout: 4000,
                            error: function () {
                            // alert("请求数据失败！");
                            },
                        },1000);
                        
                        })
                        setInterval(function () {
                            $.ajax({
                            url: baseUrl + "/finishNum",
                            type: "POST",
                            dataType: "json",
                            data: {
                                start_date : that.start_date,
                                end_date : that.end_date
                            },
                            success: function (data) {
                            that.PrefixInteger(data.data,7)
                            that.finishNumber = that.PrefixInteger(data.data,7)
                            that.finishNumber = that.thousands(that.finishNumber)
                            $('.counter').countUp();
                            },
                            // 超时时间
                            timeout: 4000,
                            error: function () {
                            // alert("请求数据失败！");
                            },
                        });
                    
                        }, 180000);
                       
                        
                    }
                }
            })

            // $('.counter').countUp();

            var interval
            $(document).ready(function () {
                getcircular()//圆形统计图
                getwave()// 折线统计图
                getoperation()//右下角的大饼
            });

            (function () {
                interval = setInterval(function () {
                    getcircular()
                    getwave()
                    getoperation()
                }, 180000);
            })();
    
            var a = 0
            $('.enter').click(function () {
                if (a == 0) {
                    requestFullScreen()
                    a = 1
                } else {
                    a = 0
                    exitFullscreen()
                }
    
            })
    
            //进入全屏
            function requestFullScreen() {
                var de = document.documentElement;
                if (de.requestFullscreen) {
                    de.requestFullscreen();
                } else if (de.mozRequestFullScreen) {
                    de.mozRequestFullScreen();
                } else if (de.webkitRequestFullScreen) {
                    de.webkitRequestFullScreen();
                }
            }
    
            //退出全屏
            function exitFullscreen() {
                var de = document;
                if (de.exitFullscreen) {
                    de.exitFullscreen();
                } else if (de.mozCancelFullScreen) {
                    de.mozCancelFullScreen();
                } else if (de.webkitCancelFullScreen) {
                    de.webkitCancelFullScreen();
                }
            }
            
        </script>
        </div>
        
    </body>

</html>